<template>
  <div class="content">

       <div class="title">
         客户管理
       </div>

        <section v-if="show.cun">
       <div class="wrap">

         <div class="head">
           <div class="left">
             <input v-model="keywords" @keyup.enter="search()" placeholder="请输入搜索内容..." type="text">
             <div class="sousuo" @click="search()">
               <img src="../assets/img/sou.png" alt="">
               搜索
             </div>
           </div>

             <div class="add" @click="add_ku()">
               添加客户
             </div>
         </div>




			 <el-table
			     :data="tableData"
			     border
           stripe
			     style="width: 100%;margin-top:20px;">

			     <el-table-column
			           type="selection"
			           fixed
			           width="55">
			         </el-table-column>
			       <el-table-column
			             type="index"
			             fixed
			             width="50">
			        </el-table-column>
			     <el-table-column
			       prop="real_name"
			       label="姓名"
			       width="180">
			     </el-table-column>
			     <el-table-column
			       prop="mobile"
			       label="电话"
			       width="180">
			     </el-table-column>
			     <el-table-column
			       prop="wx_account"
			       label="微信号"
			       width="180">
			     </el-table-column>
			     <el-table-column
			       prop="company"
			       label="组织"
			       width="180">
			     </el-table-column>
			     <el-table-column
			       prop="admin_name"
			       label="管理员"
			       width="180">
			     </el-table-column>
           <el-table-column
             prop="admin_mobile"
             label="管理员电话"
             width="180">
           </el-table-column>
           <el-table-column
             prop="address"
             label="地址"
             width="180">
           </el-table-column>
			     <el-table-column
           width="180"
           label="操作">
			           <template slot-scope="scope">
			             <el-button
			               size="mini" @click='edit(scope.row)'>编辑</el-button>
			             <el-button
			               size="mini"
			               type="danger" @click='delete_powerslog(scope.row)'>删除</el-button>
			           </template>
			         </el-table-column>
			   </el-table>
         <div class="page">
           <el-pagination
             background
             @current-change='current'
             @prev-click='prev'
             @next-click='next'
             :page-size='page'
             layout="prev, pager, next"
             :total="count">
           </el-pagination>
         </div>
		 </div>

</section>
   <el-dialog
        title="编辑"
        :visible.sync="dialogVisible"
        width="30%"
       >
       <el-form   label-width="100px" class="demo-ruleForm">
        <el-form-item label="姓名" >
         <el-input v-model="form.real_name"></el-input>
           </el-form-item>
           <el-form-item label="电话" >
            <el-input v-model="form.mobile"></el-input>
              </el-form-item>
              <el-form-item label="微信号" >
               <el-input v-model="form.wx_account"></el-input>
                 </el-form-item>
                 <el-form-item label="组织" >
                  <el-input v-model="form.company"></el-input>
                    </el-form-item>
                    <el-form-item label="管理员" >
                     <el-input v-model="form.admin_name"></el-input>
                       </el-form-item>
                       <el-form-item label="管理员电话" >
                        <el-input v-model="form.admin_mobile"></el-input>
                          </el-form-item>
                          <el-form-item label="地址" >
                           <el-input v-model="form.address"></el-input>
                             </el-form-item>
       </el-form>
       <div class="btn">
         <span @click="submit">提交</span>
         <span @click="cancle">取消</span>
       </div>
      </el-dialog>

    <addku v-if="show.children" :isshow='show'></addku>
  </div>
</template>

<script>
  import {customer_list,edit_customer,delete_account} from '../js/getApi.js'
  import addku from './add_ku'
  export default{
    components:{
      addku
    },
    data(){
      return{
        count:0,
        page:8,
        form:{
          id:'',
          real_name:'',
          mobile:'',
          wx_account:'',
          company:'',
          admin_name:'',
          admin_mobile:'',
          address:''
        },
        keywords:'',
        show:{
          cun:true,
          children:false
        },
        dialogVisible:false,
        tableData:[]
      }
    },
    methods:{
      current(val){
         this.getlist(val,this.page);
      },
      prev(val){
          this.getlist(val,this.page);
      },
      next(val){
          this.getlist(val,this.page);
      },
      add_ku(){
         this.show.cun=!this.show.cun;
         this.show.children=! this.show.children;
      },
     async delete_powerslog(row){
         const data=await delete_account(this.$store.state.token,row.id);
          alert(data.msg);
         if(data.code==1){
           this.getlist(1,this.page)
         }
      },
      edit(row){
        this.dialogVisible=true;
        this.form={id:row.id,real_name:row.real_name,mobile:row.mobile,wx_account:row.wx_account,company:row.company,admin_name:row.admin_name,admin_mobile:row.admin_mobile,address:row.address};
      },
     async submit(){
        const data=await edit_customer(this.$store.state.token,this.form);
         alert(data.msg);
        if(data.code==1){
          this.getlist(1,this.page)
          this.cancle();
        }
      },
      cancle(){
        this.dialogVisible=false;
      },
      async  search(page,size){
          const data=await customer_list(this.$store.state.token,this.keywords,page,size);
         this.tableData=data.list;
         this.count=data.count;
       },
     async getlist(page,size){
        const data=await  customer_list(this.$store.state.token,'',page,size);
        this.count=data.count;
        this.tableData=data.list;
      }
    },
    created() {
      this.getlist(1,this.page)
    }
  }
</script>

<style scoped>


  .title{
      height: 84px;
      line-height: 84px;
      color: rgba(5, 5, 5, 100);
      font-size: 16px;
      text-align: left;
      font-family: SourceHanSansSC-regular;
      border-bottom: 1px solid #F7F7F7;
  }
  .page{
   text-align: center;
   margin: 30px auto;
  }

  .head{
    margin-top:33px;
   display: flex;
  }
  .head div{
    display: inline-block;
  }

  .head input{
    width: 190px;
    height:30px;
    border-radius:10px 0 0 10px;
    padding-left:10px;
    border: 1px solid rgba(187, 187, 187, 100);
    float: left;
  }
  .sousuo{
    width: 88px;
    height:34px;
    line-height: 34px;
    background-color: rgba(26, 188, 156, 100);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 100);
    float: left;
    margin-left: -1px;
    margin-top: -1px;
    color: #fff;
    cursor: pointer;
  }
  .sousuo img{
    width: 19px;
    height: 19px;
    vertical-align:middle;
  }
  .add{
    width: 88px;
    height:34px;
    line-height: 34px;
    background-color: rgba(26, 188, 156, 100);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 100);
    color: #fff;
    margin-left: 50px;
    cursor: pointer;
  }
  .btn{
       margin-left: 100px;
       margin-top: 100px;
       }
       .btn span{
         display:inline-block;
         cursor: pointer;
       }
    .btn span:nth-of-type(1){
         width: 100px;
         height: 34px;
         line-height:34px;
         border-radius: 2px;
         background-color: rgba(26, 188, 156, 100);
         color: rgba(255, 255, 255, 100);
         font-size: 14px;
         text-align: center;
         font-family: Roboto;
     }
     .btn span:nth-of-type(2){
         width: 100px;
         height: 34px;
         line-height:34px;
         border-radius: 2px;
         background-color: rgba(255, 255, 255, 100);
         color: rgba(26, 188, 156, 100);
         font-size: 14px;
         text-align: center;
         font-family: Roboto;
         border: 1px solid rgba(26, 188, 156, 100);
         margin-left: 20px;
        }
</style>
